<template>
  <div class="standard-detail">
    <div v-if="showError" class="notification error">
      {{ errorMessage }}
    </div>
    <div v-if="showSuccess" class="notification success">
      {{ successMessage }}
    </div>
    <div class="header">
      <div class="header-left">
        <button class="back-button" @click="$router.go(-1)">
          <span class="icon">←</span> 返回
        </button>
        <h2>标准问题详情</h2>
        <button class="back-button" @click="goToOriginalQuestion">
          <span class="icon">🔍</span> 查看原始问题
        </button>
      </div>
      <div class="header-right">
        <label class="toggle-switch">
          <input 
            type="checkbox" 
            v-model="isActive" 
            @change="toggleActiveStatus"
            :disabled="versionStore.currentVersion?.published"
          >
          <span class="slider"></span>
          <span class="toggle-label">{{ isActive ? '活跃' : '停用' }}</span>
        </label>
        <div v-if="versionStore.currentVersion?.published" class="disabled-hint">
          当前版本已发布，不可编辑
        </div>
        <div class="tabs">
          <button 
            v-for="tab in tabs"
            :key="tab.value"
            :class="{ active: activeTab === tab.value }"
            @click="switchTab(tab.value)"
          >
            {{ tab.label }}
          </button>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- 标签管理 -->
      <div class="tags-section">
        <h3>问题标签</h3>
        <div class="tags-container">
          <div v-for="tag in tags" :key="tag" class="tag-item">
            {{ tag }}
            <span 
            class="tag-remove" 
            @click="!versionStore.currentVersion?.published && handleRemoveTag(tag)"
            :class="{ disabled: versionStore.currentVersion?.published }"
          >×</span>
          </div>
        </div>
        <div class="tag-input">
          <input 
            v-model="newTag" 
            placeholder="输入新标签" 
            @keydown.enter="handleAddTag"
            list="tagSuggestions"
            :disabled="versionStore.currentVersion?.published"
          >
          <button 
            @click="handleAddTag"
            :disabled="versionStore.currentVersion?.published"
          >+</button>
        </div>
        <datalist id="tagSuggestions">
          <option v-for="tag in allTags" :key="tag" :value="tag"></option>
        </datalist>
      </div>

      <!-- 标准问题内容 -->
      <div class="question-section">
        <h3>标准问题</h3>
        <div class="meta-info">
          <span><strong>ID:</strong> {{ standardQuestion?.id }}</span>
          <span><strong>更新时间:</strong> {{ standardQuestion?.updateTime }}</span>
          <span v-if="standardQuestion?.category">
            <strong>分类:</strong> 
            <span v-if="!isEditingCategory">{{ standardQuestion.category }}</span>
            <div v-if="isEditingCategory" class="category-edit-container">
              <select 
                v-model="editingCategory"
                class="category-edit-select"
              >
                <option disabled value="">请选择分类</option>
                <option v-for="cat in allCategories" :key="cat" :value="cat">{{ cat }}</option>
                <option value="__new__">+ 新建分类</option>
              </select>
              <input
                v-if="editingCategory === '__new__'"
                v-model="newCategoryName"
                placeholder="输入新分类名称"
                class="new-category-input"
                @keydown.enter="handleSaveNewCategory"
              />
            </div>
            <button 
              v-if="!versionStore.currentVersion?.published"
              @click="handleEditCategory"
              class="edit-category-btn"
            >
              {{ isEditingCategory ? '保存' : '编辑' }}
            </button>
            <button 
              v-if="isEditingCategory"
              @click="isEditingCategory = false"
              class="cancel-category-btn"
            >
              取消
            </button>
          </span>
        </div>
        <div v-if="!isEditingQuestion" 
             @dblclick="!versionStore.currentVersion?.published && startEditingQuestion()"
             class="editable-question"
             :class="{ 'not-editable': versionStore.currentVersion?.published }">
          <p>{{ standardQuestion?.question||'请输入标准问题' }}</p>
        </div>
        <div v-else class="edit-container">
          <textarea 
            ref="questionInput"
            v-model="editingQuestionText"
            class="edit-textarea"
            @blur="saveQuestion"
            @keydown.enter="saveQuestion"
          ></textarea>
          <div class="edit-actions">
            <button @click="saveQuestion" class="save-btn">保存</button>
            <button @click="cancelEditingQuestion" class="cancel-btn">取消</button>
          </div>
        </div>
      </div>
      <div v-if="activeTab === 'standard'">
        <div class="answer-section">
          <h3>标准答案</h3>
          <div class="meta-info" v-if="standardAnswer">
            <span><strong>更新时间:</strong> {{ standardAnswer.updateTime }}</span>
          </div>
          <div v-if="!isEditingAnswer" 
               @dblclick="!versionStore.currentVersion?.published && startEditingAnswer()"
               class="editable-answer"
               :class="{ 'not-editable': versionStore.currentVersion?.published }">
            <div class="answer-content">{{ standardAnswer?.answer||'请输入标准答案' }}</div>
          </div>
          <div v-else class="edit-container">
            <textarea 
              ref="answerInput"
              v-model="editingAnswerText"
              class="edit-textarea"
              @blur="saveAnswer"
              @keydown.enter="saveAnswer"
            ></textarea>
            <div class="edit-actions">
              <button @click="saveAnswer" class="save-btn">保存</button>
              <button @click="cancelEditingAnswer" class="cancel-btn">取消</button>
            </div>
          </div>
          <div class="key-points" v-if="standardAnswer?.keyPoints?.length">
            <h4>关键点：</h4>
            <ul>
              <li v-for="(point, index) in standardAnswer.keyPoints" :key="index">
                <span class="keyword">{{ point.keyword }}</span>
                <span class="importance" :class="point.value">
                  (分值：{{ point.value }})
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 候选回答 -->
      <div v-if="activeTab === 'candidate'">
        <div class="candidate-answer-section">
          <button 
            class="add-candidate-btn"
            @click="startEditingCandidateAnswer"
            :disabled="versionStore.currentVersion?.published"
          >
            + 添加候选回答
          </button>

          <div v-if="isEditingCandidateAnswer" class="edit-container">
            <textarea 
              v-model="editingCandidateAnswerText"
              class="edit-textarea"
              placeholder="请输入候选回答内容"
            ></textarea>
            <input
              v-model="candidateAnswerAuthor"
              class="author-input"
              placeholder="您的名字（可选）"
            />
            <div class="edit-actions">
              <button @click="saveCandidateAnswer" class="save-btn">保存</button>
              <button @click="cancelEditingCandidateAnswer" class="cancel-btn">取消</button>
            </div>
          </div>

          <div v-if="candidateAnswers.length > 0" class="candidate-answers">
            <div v-for="answer in candidateAnswers" :key="answer.id" class="candidate-answer">
              <div class="answer-content">{{ answer.answer }}</div>
              <div class="meta">
                <span>作者：{{ answer.author }}</span>
                <span>创建时间：{{answer.updateTime }}</span>
              </div>
              <button 
                class="delete-btn"
                @click="handleDeleteCandidateAnswer(answer.id)"
              >
                删除
              </button>
            </div>
          </div>
          <div v-else class="no-data">
            暂无候选回答
          </div>
        </div>
      </div>

      <!-- 移除众包回答展示区域 -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useVersionStore } from '@/stores/versionStore'
import { 
  getStandardQuestionById,
  updateStandardQuestion,
  toggleStandardQuestionStatus,
  // getCrowdAnswers,
  // getExpertAnswers,
  addQuestionTag,
  removeQuestionTag,
  getAllTags,
  getTagsByQuestionId,
  setQuestionCategory,
  getAllCategories
} from '@/api/question'
import { getStandardAnswersByQuestionId,
  updateStandardAnswer,
  createStandardAnswer,
  getCandidateAnswersByQuestionId,
  createCandidateAnswer,
  deleteCandidateAnswer,
  type CandidateAnswer
} from '@/api/answer'

export default defineComponent({
  name: 'StandardDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const versionStore = useVersionStore()
    const errorMessage = ref('')
    const showError = ref(false)
    const showSuccess = ref(false)
    const successMessage = ref('')
    const standardQuestion = ref<any>(null)
    const standardAnswer = ref<any>(null)
    // 移除crowdAnswers变量
    const candidateAnswers = ref<CandidateAnswer[]>([])
    const isEditingCandidateAnswer = ref(false)
    const editingCandidateAnswerText = ref('')
    const candidateAnswerAuthor = ref('')
    const isActive = ref(false)
    const expertAnswers = ref<any[]>([])
    const loading = ref(false)
    const activeTab = ref('standard')
    const versionCode = ref(versionStore.currentVersion?.ver_code || 'unknown')
    const tags = ref<string[]>([])
    const allTags = ref<string[]>([])
    const allCategories = ref<string[]>([])
    const newTag = ref('')
    const isEditingCategory = ref(false)
    const editingCategory = ref('')
    const newCategoryName = ref('')
    const tabs = [
      { label: '标准回答', value: 'standard' },
      { label: '候选回答', value: 'candidate' }
    ]

    const loadTags = async () => {
      try {
        tags.value = await getTagsByQuestionId(Number(route.params.id), versionCode.value)
      } catch (error) {
        console.error('加载标签失败:', error)
        tags.value = []
      }
    }

    const loadStandardData = async () => {
      try {
        loading.value = true
        const question = await getStandardQuestionById(Number(route.params.id), versionCode.value)
        standardQuestion.value = question
        console.log('加载标准问题:', question)
        isActive.value = question.active
        
        const answer = await getStandardAnswersByQuestionId(Number(route.params.id), versionCode.value)
        standardAnswer.value = answer
        
        // 加载所有可用标签和分类
        const [allTagsResponse, categoriesResponse] = await Promise.all([
          getAllTags(),
          getAllCategories(versionCode.value)
        ])
        allTags.value = allTagsResponse
        allCategories.value = categoriesResponse

        // 单独加载当前问题的标签
        await loadTags()
      } catch (error: any) {
        console.error('加载标准问题详情失败:', error)
        errorMessage.value = error.response?.data?.message || '加载标准问题详情失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const toggleActiveStatus = async () => {
      try {
        loading.value = true
        await toggleStandardQuestionStatus(Number(route.params.id),versionCode.value)
        // 刷新问题数据确保状态同步
        const question = await getStandardQuestionById(Number(route.params.id),versionCode.value)
        standardQuestion.value = question
        isActive.value = question.active
      } catch (error: any) {
        console.error('切换活跃状态失败:', error)
        // 恢复原状态
        isActive.value = !isActive.value
      } finally {
        loading.value = false
      }
    }

    // 移除loadCrowdAnswers方法

    const loadCandidateAnswers = async () => {
      try {
        loading.value = true
        const answers = await getCandidateAnswersByQuestionId(
          Number(route.params.id),
          versionCode.value
        )
        candidateAnswers.value = answers
      } catch (error) {
        console.error('加载候选回答失败:', error)
      } finally {
        loading.value = false
      }
    }

    const startEditingCandidateAnswer = () => {
      isEditingCandidateAnswer.value = true
      editingCandidateAnswerText.value = ''
      candidateAnswerAuthor.value = ''
    }

    const cancelEditingCandidateAnswer = () => {
      isEditingCandidateAnswer.value = false
      editingCandidateAnswerText.value = ''
      candidateAnswerAuthor.value = ''
    }

    const saveCandidateAnswer = async () => {
      if (!editingCandidateAnswerText.value.trim() || !standardQuestion.value?.id) return
      
      try {
        loading.value = true
        await createCandidateAnswer({
          standardQuestionId: standardQuestion.value.id,
          version: versionCode.value,
          answer: editingCandidateAnswerText.value,
          author: candidateAnswerAuthor.value || '匿名'
        })
        await loadCandidateAnswers()
        isEditingCandidateAnswer.value = false
        successMessage.value = '候选回答保存成功'
        showSuccess.value = true
        setTimeout(() => showSuccess.value = false, 3000)
      } catch (error: any) {
        console.error('保存候选回答失败:', error)
        errorMessage.value = error.response?.data?.message || '保存候选回答失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const handleDeleteCandidateAnswer = async (id: number) => {
      try {
        loading.value = true
        await deleteCandidateAnswer(id, versionCode.value)
        await loadCandidateAnswers()
        successMessage.value = '候选回答删除成功'
        showSuccess.value = true
        setTimeout(() => showSuccess.value = false, 3000)
      } catch (error: any) {
        console.error('删除候选回答失败:', error)
        errorMessage.value = error.response?.data?.message || '删除候选回答失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const loadExpertAnswers = async () => {
      // try {
      //   loading.value = true
      //   const answers = await getExpertAnswers(Number(route.params.id))
      //   expertAnswers.value = answers
      // } catch (error) {
      //   console.error('加载专家回答失败:', error)
      // } finally {
      //   loading.value = false
      // }

    }

    const isEditingQuestion = ref(false)
    const isEditingAnswer = ref(false)
    const editingQuestionText = ref('')
    const editingAnswerText = ref('')
    const questionInput = ref<HTMLTextAreaElement | null>(null)
    const answerInput = ref<HTMLTextAreaElement | null>(null)

    const startEditingQuestion = () => {
      isEditingQuestion.value = true
      editingQuestionText.value = standardQuestion.value?.question || '请输入标准问题'
      nextTick(() => {
        questionInput.value?.focus()
      })
    }

    const cancelEditingQuestion = () => {
      if (standardQuestion.value) {
        editingQuestionText.value = standardQuestion.value.question || '请输入标准问题'
      } else {
        editingQuestionText.value = '请输入标准问题'
      }
      isEditingQuestion.value = false
    }

    const startEditingAnswer = () => {
      isEditingAnswer.value = true
      editingAnswerText.value = standardAnswer.value?.answer || '请输入标准答案'
      nextTick(() => {
        answerInput.value?.focus()
      })
    }

    const cancelEditingAnswer = () => {
      if (standardAnswer.value) {
        editingAnswerText.value = standardAnswer.value.answer || '请输入标准答案'
      } else {
        editingAnswerText.value = '请输入标准答案'
      }
      isEditingAnswer.value = false
    }

    const saveAnswer = async () => {
      if (!editingAnswerText.value.trim()) return
      
      try {
        loading.value = true
        if(!standardAnswer.value) {
          // 如果没有标准答案，则创建新的
          standardAnswer.value = await createStandardAnswer(
            editingAnswerText.value,
            standardQuestion.value.id,
            versionCode.value
          )
        } else {
          // 更新现有的标准答案
          console.log(standardAnswer.value)
          await updateStandardAnswer(
            standardAnswer.value.questionId,
            versionCode.value,
            editingAnswerText.value
          )
          
        }
        // 确保本地数据完整更新
        standardAnswer.value = await getStandardAnswersByQuestionId(standardQuestion.value.id,versionCode.value)
        isEditingAnswer.value = false
        successMessage.value = '标准答案保存成功'
        showSuccess.value = true
        setTimeout(() => showSuccess.value = false, 3000)
      } catch (error: any) {
        console.error('保存标准答案失败:', error)
        errorMessage.value = error.response?.data?.message || '保存标准答案失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const saveQuestion = async () => {
      if (!standardQuestion.value || !editingQuestionText.value.trim()) return
      
      try {
        loading.value = true
        await updateStandardQuestion(
          standardQuestion.value.id,
          versionCode.value,
          editingQuestionText.value
        )
        // 确保本地数据同步更新
        standardQuestion.value = await getStandardQuestionById(Number(route.params.id),versionCode.value)
        isEditingQuestion.value = false
        successMessage.value = '标准问题保存成功'
        showSuccess.value = true
        setTimeout(() => showSuccess.value = false, 3000)
      } catch (error: any) {
        console.error('更新标准问题失败:', error)
        errorMessage.value = error.response?.data?.message || '更新标准问题失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const switchTab = (tab: string) => {
      activeTab.value = tab
      if (tab === 'expert' && expertAnswers.value.length === 0) {
        loadExpertAnswers()
      }
    }

    const goToOriginalQuestion = () => {
      if (standardQuestion.value?.originalQuestion?.id) {
        router.push({
          name: 'questionDetail',
          params: {
            id: standardQuestion.value.originalQuestion.id,
            version: versionStore.currentVersion?.ver_code || standardQuestion.value.originalQuestion.version || '1.0',
            title: standardQuestion.value.originalQuestion.title||'',
            content: standardQuestion.value.originalQuestion.content || '',
            source: standardQuestion.value.originalQuestion.source,
            time: standardQuestion.value.originalQuestion.updateTime||'',
            active: standardQuestion.value.active ? 'true' : 'false'
          }
        })
      }
    }

    const handleAddTag = async () => {
      if (!newTag.value.trim() || !standardQuestion.value?.id) return
      
      try {
        loading.value = true
        await addQuestionTag(standardQuestion.value.id, versionCode.value, newTag.value)
        tags.value = await getTagsByQuestionId(Number(standardQuestion.value.id), versionCode.value)
        newTag.value = ''
        successMessage.value = '标签添加成功'
        showSuccess.value = true
        setTimeout(() => showSuccess.value = false, 3000)
      } catch (error: any) {
        console.error('添加标签失败:', error)
        errorMessage.value = error.response?.data?.message || '添加标签失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const handleRemoveTag = async (tag: string) => {
      if (!standardQuestion.value?.id) return
      
      try {
        loading.value = true
        await removeQuestionTag(standardQuestion.value.id, versionCode.value, tag)
        tags.value = tags.value.filter(t => t !== tag)
        successMessage.value = '标签移除成功'
        showSuccess.value = true
        setTimeout(() => showSuccess.value = false, 3000)
      } catch (error: any) {
        console.error('移除标签失败:', error)
        errorMessage.value = error.response?.data?.message || '移除标签失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const handleSaveNewCategory = async () => {
      if (!newCategoryName.value.trim()) return
      
      try {
        loading.value = true
        // 这里需要添加创建新分类的API调用
        // 假设有一个createCategory API
        // await createCategory(versionCode.value, newCategoryName.value)
        
        // 临时添加到本地列表
        allCategories.value.push(newCategoryName.value)
        editingCategory.value = newCategoryName.value
        newCategoryName.value = ''
      } catch (error: any) {
        console.error('创建分类失败:', error)
        errorMessage.value = error.response?.data?.message || '创建分类失败'
        showError.value = true
        setTimeout(() => showError.value = false, 3000)
      } finally {
        loading.value = false
      }
    }

    const handleEditCategory = async () => {
      if (!standardQuestion.value?.id) return
      
      if (isEditingCategory.value) {
        try {
          if (editingCategory.value === '__new__') {
            await handleSaveNewCategory()
            if (!newCategoryName.value.trim()) return
          }
          
          if (!editingCategory.value) {
            errorMessage.value = '请选择有效的分类'
            showError.value = true
            setTimeout(() => showError.value = false, 3000)
            return
          }

          loading.value = true
          await setQuestionCategory(
            standardQuestion.value.id,
            versionCode.value,
            editingCategory.value
          )
          // 刷新问题数据
          const question = await getStandardQuestionById(Number(route.params.id), versionCode.value)
          standardQuestion.value = question
          successMessage.value = '分类更新成功'
          showSuccess.value = true
          setTimeout(() => showSuccess.value = false, 3000)
        } catch (error: any) {
          console.error('更新分类失败:', error)
          errorMessage.value = error.response?.data?.message || '更新分类失败'
          showError.value = true
          setTimeout(() => showError.value = false, 3000)
        } finally {
          loading.value = false
          isEditingCategory.value = false
          newCategoryName.value = ''
        }
      } else {
        isEditingCategory.value = true
        editingCategory.value = standardQuestion.value?.category || ''
      }
    }

    onMounted(() => {
      loadStandardData()
    })

    watch(activeTab, (newTab) => {
      if (newTab === 'candidate' && candidateAnswers.value.length === 0) {
        loadCandidateAnswers()
      }
    })

    return {
      versionStore,
      standardQuestion,
      standardAnswer,
      expertAnswers,
      loading,
      activeTab,
      tabs,
      switchTab,
      isActive,
      toggleActiveStatus,
      isEditingQuestion,
      isEditingAnswer,
      startEditingQuestion,
      startEditingAnswer,
      saveQuestion,
      saveAnswer,
      cancelEditingQuestion,
      cancelEditingAnswer,
      editingQuestionText,
      editingAnswerText,
      goToOriginalQuestion,
      tags,
      allTags,
      newTag,
      handleAddTag,
      handleRemoveTag,
      errorMessage,
      showError,
      showSuccess,
      successMessage,
      startEditingCandidateAnswer,
      saveCandidateAnswer,
      isEditingCandidateAnswer,
      editingCandidateAnswerText,
      candidateAnswerAuthor,
      cancelEditingCandidateAnswer,
      candidateAnswers,
      handleDeleteCandidateAnswer,
      allCategories,
      isEditingCategory,
      editingCategory,
      newCategoryName,
      handleEditCategory,
      handleSaveNewCategory
    }
  }
})
</script>

<style scoped>
.standard-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.header-right {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.tags-section {
  margin-bottom: 10px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background-color: #e6f7ff;
  border-radius: 12px;
  color: #1890ff;
  font-size: 20px;
  margin: 0;
}

.tag-item:hover {
  background-color: #bae7ff;
}

.tag-input {
  display: flex;
  gap: 6px;
}

.tag-input input {
  flex: 0 0 150px; /* 固定宽度 */
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 20px;
  width: 150px; /* 明确设置宽度 */
}

.tag-input button {
  padding: 4px 8px;
  background-color: #315efb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
}

.back-button {
  padding: 4px 8px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  font-size: 20px;
  color: #666;
}

.back-button:hover {
  background-color: #f0f0f0;
}

.back-button .icon {
  font-weight: bold;
  font-size: 12px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.toggle-switch input {
  display: none;
}

.slider {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 24px;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

input:checked + .slider {
  background-color: #315efb;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.toggle-label {
  font-size: 14px;
  color: #666;
}

.tabs {
  display: flex;
  gap: 10px;
}

.tabs button {
  padding: 8px 16px;
  border: none;
  border-radius: 16px;
  background: #f0f0f0;
  cursor: pointer;
}

.tabs button.active {
  background: #315efb;
  color: white;
}

.content {
  margin-top: 20px;
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.question-section, .answer-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow: hidden;
}

.meta-info {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.meta-info span {
  display: flex;
  align-items: center;
}

.meta-info strong {
  margin-right: 5px;
  color: #333;
}

.editable-question, .editable-answer {
  cursor: pointer;
  transition: background-color 0.2s;
}

.editable-question:hover, .editable-answer:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.edit-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edit-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 100px;
  max-height: 300px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
  overflow-y: auto;
}

.edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.category-edit-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.category-edit-select {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 8px;
  min-width: 150px;
}

.new-category-input {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 150px;
}

.edit-category-btn, .cancel-category-btn {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.edit-category-btn {
  background-color: #315efb;
  color: white;
  border: none;
}

.cancel-category-btn {
  background-color: #f0f0f0;
  color: #666;
  border: 1px solid #ddd;
}

.save-btn, .cancel-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn {
  background-color: #315efb;
  color: white;
}

.cancel-btn {
  background-color: #e60303dc;
}

.answer-content {
  white-space: pre-wrap;
  line-height: 1.6;
  margin: 15px 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.key-points {
  margin-top: 20px;
}

.key-points ul {
  padding-left: 0;
  list-style-type: none;
  display: grid;
  gap: 12px;
}

.key-points li {
  margin: 0;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.key-points li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.keyword {
  font-weight: 600;
  font-size: 1.05em;
  position: relative;
  padding-left: 20px;
}

.keyword::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #315efb;
}

.importance {
  font-size: 0.9em;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.importance.least-important {
  color: #666;
  background: rgba(136, 136, 136, 0.1);
}

.importance.important {
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}

.importance.very-important {
  color: #f5222d;
  background: rgba(245, 34, 45, 0.1);
}

.crowd-answer, .expert-answer, .candidate-answer {
  padding: 15px;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
}

.candidate-answer .delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.add-candidate-btn {
  padding: 8px 16px;
  margin-bottom: 20px;
  background-color: #315efb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.author-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.meta {
  margin-top: 10px;
  font-size: 0.9em;
  color: #666;
}

.meta span {
  margin-right: 15px;
}

.no-data {
  text-align: center;
  padding: 30px;
  color: #999;
}
.not-editable {
  cursor: default !important;
}

.not-editable:hover {
  background-color: transparent !important;
}

.disabled-hint {
  color: #666;
  font-size: 12px;
  margin-left: 8px;
}

.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 4px;
  color: white;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: fadeInOut 3s ease-in-out;
}

.error {
  background-color: #ff4d4f;
}

.success {
  background-color: #52c41a;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}
</style>
